<template>
  <el-tooltip
    :placement="props.placement"
    :effect="props.effect"
    raw-content
    :content="pContent"
    popper-class="tooltip-popper"
  >
    <span class="question-icon" :style="{ color: props.color }"
      ><IconifyIconOnline
        icon="mdi:information-variant-circle"
        width="18px"
        height="18px"
    /></span>
  </el-tooltip>
</template>
<script setup lang="ts">
interface Props {
  placement?:
    | "top"
    | "top-start"
    | "top-end"
    | "left"
    | "left-start"
    | "left-end"
    | "right"
    | "right-start"
    | "right-end"
    | "bottom"
    | "bottom-start"
    | "bottom-end";
  effect?: "dark" | "light";
  content: string;
  color?: string;
}

const props = withDefaults(defineProps<Props>(), {
  placement: "bottom",
  effect: "light",
  content: "",
  color: "#626262"
});
// 如果content已经包含了p或者div标签，就不用格式化了。
const pContent =
  props.content.includes("<p>") || props.content.includes("<div>")
    ? props.content
    : props.content
        .split(/\\n|<br\/>/)
        .map(item => {
          return `<p>${item}</p>`;
        })
        .join("");
// console.log("props:", props);
</script>
<style lang="scss">
.question-icon {
  display: flex;
  align-items: center;
  margin-left: 10px;
}
</style>
